<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>今日团购</title>
  <link rel="stylesheet" type="text/css" href="/res/static/css/main.css">
  <link rel="stylesheet" type="text/css" href="/res/layui/css/layui.css">
  <script type="text/javascript" src="/res/layui/layui.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
</head>
<body>

  <div class="site-nav-bg">
    <div class="site-nav w1200">
      <p class="sn-back-home">
        <i class="layui-icon layui-icon-home"></i>
        <a href="/index">首页</a>
      </p>
      <div class="sn-quick-menu">
        <div>
          <li class="layui-nav-item" lay-unselect="">
            <div id="">
              <div style="margin-right: 5px">
                <img id="userImg" th:if="${session.userImg != null}"  th:src="${session.userImg}"  class="layui-nav-img">
              </div>
              <div id="username" style="color: crimson;margin-right: 6px;font-size: 24px" th:text="${session.userName}"></div>
            </div>
            <!--<dl class="layui-nav-child">-->
            <!--<dd><a href="javascript:;">修改信息</a></dd>-->
            <!--<dd><a href="javascript:;">安全管理</a></dd>-->
            <!--<dd><a href="javascript:;">退了</a></dd>-->
            <!--</dl>-->
          </li>
        </div>
        <div class="login"><a href="/login.html"><p th:text="${session.userName!=null?'':'登录'}"></p>&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color:coral;margin-right: 6px;font-size: 15px" href="/myself">个人中心&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <div class="sp-cart"><a style="color: coral;margin-right: 6px;font-size: 15px" href="/showShopCart">购物车</a><span th:text="${size}"></span></div>
        <div class="sp-cart myorder"><a href="/showOrder">&nbsp;&nbsp;&nbsp;我的订单</a></div>
      </div>
    </div>
  </div>



  <div class="header">
    <div class="headerLayout w1200">
      <div class="headerCon">
        <h1 class="mallLogo">
          <a href="/index" title="母婴商城">
            <img src="/res/static/img/logo.png">
          </a>
        </h1>
        <div class="mallSearch">
          <form action="/goodsController/indexSearch" class="layui-form" novalidate method="post"  >
            <input type="text" name="content" required  lay-verify="required"  autocomplete="off" class="layui-input" placeholder="请输入需要的商品">
            <button class="layui-btn" lay-submit lay-filter="formDemo" type="submit">
              <i class="layui-icon layui-icon-search"></i>
            </button>
            <input type="hidden" name="" value="">
          </form>
        </div>
      </div>
    </div>
  </div>


  <div class="content content-nav-base buytoday-content">
    <div id="list-cont">
      <div class="main-nav">
        <div class="inner-cont0">
          <div class="inner-cont1 w1200">
            <div class="inner-cont2">
              <a href="/show">所有商品</a>
              <a href="/bulk" class="active">今日折扣</a>
              <a href="information.html">母婴资讯</a>
              <a href="about.html">关于我们</a>
            </div>
          </div>
        </div>
      </div>
      <div class="banner-box">
        <div class="banner"></div>
      </div>
      <div class="product-list-box">
        <div class="product-list w1200">  
          <div class="tab-title">
            <a href="javascript:;" class="active tuang" data-content="tuangou">今日折扣</a>
            <a href="javascript:;"  data-content="yukao">明日预告</a>
          </div>
          <div class="list-cont" cont = 'tuangou'>
            <div class="item-box layui-clear">
              <div class="item" th:each="todaybulk:${todayBulkHashMap}">
                <a th:href="@{'/details?id='+${todaybulk.value.goodsId}}">
                  <img th:src="${todaybulk.value.consultImgUrl}" alt=""  style="width: 280px;height: 280px">
                  <div class="text-box">
                    <p class="title" th:text="${todaybulk.value.goodsDescribe}"></p>
                    <p class="plic">
                      <span class="ciur-pic" th:text="'惊爆价：￥'+${todaybulk.key.bulkPrice}"></span>
                      <span class="Ori-pic" th:text="'原价：￥'+${todaybulk.value.price}"></span>
                      <!--<span class="discount">5折</span>-->
                    </p>
                  </div>
                </a>

              </div>
            </div>
            <div id="demo0" style="text-align: center;"></div>
          </div>

          <div class="list-cont layui-hide" cont = 'yukao'>
            <div class="item-box layui-clear">
              <div class="item" th:each="tbulk:${tomorrowBulkHashMap}">
                <img th:src="${tbulk.value.consultImgUrl}" alt="" style="width: 280px;height: 280px">
                <div class="text-box">
                  <p class="title" th:text="${tbulk.value.goodsDescribe}"></p>
                  <p class="plic">
                    <span class="ciur-pic" th:text="'惊爆价：￥'+${tbulk.key.bulkPrice}"></span>
                    <span class="Ori-pic" th:text="'原价：￥'+${tbulk.value.price}"></span>
                    <!--<span class="discount">5折</span>-->
                  </p>
                </div>
              </div>
            </div>
            <div id="demo0" style="text-align: center;"></div>
          </div>


        </div>  
      </div>
      <div class="footer-wrap">
        <div class="footer w1200">
          <div class="title">
            <h3>折扣销量榜</h3>
          </div>

          <div class="list-box layui-clear" id="footerList">
            <div class="item" th:each="SalesVolume:${SalesVolume}">
              <img th:src="${SalesVolume.value.consultImgUrl}" alt="" style="width: 280px;height: 280px">
              <div class="text">
                <div class="right-title-number" >1</div>
                <div class="commod">
                  <p th:text="${SalesVolume.value.goodsDescribe}"></p>
                  <span th:text="'￥'+${SalesVolume.key.bulkPrice}"></span>
                </div>
              </div>
            </div>


          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 模版引擎导入 -->
 <!--  <script type="text/html" id="demo">
    <div class="main-nav">
      <div class="inner-cont0">
        <div class="inner-cont1 w1200">
          <div class="inner-cont2">
            <a href="commodity.html">所有商品</a>
            <a href="buytoday.html" class="active">今日团购</a>
            <a href="information.html">母婴资讯</a>
            <a href="about.html">关于我们</a>
          </div>
        </div>
      </div>
    </div>
    <div class="banner-box">
      <div class="banner"></div>
    </div>
    <div class="product-list-box">
      <div class="product-list w1200">
        <div class="tab-title">
          <a href="javascript:;" class="active tuang">今日团购</a>
          <a href="javascript:;">明日预告</a>
        </div>
        <div class="list-cont">
          <div class="item-box layui-clear">
              {{# layui.each(d.productList,function(index,item){}}
              <div class="item">
                <img src="{{item.img}}" alt="">
                <div class="text-box">
                  <p class="title">{{item.title}}</p>
                  <p class="plic">
                    <span class="ciur-pic">{{item.ciurPic}}</span>
                    <span class="Ori-pic">{{item.OriPic}}</span>
                    <span class="discount">{{item.discount}}</span>
                  </p>
                </div>
              </div>
              {{#})}}
          </div>
         <div id="demo0" style="text-align: center;"></div>
        </div>
      </div>
    </div>
    <div class="footer-wrap">
      <div class="footer w1200">
        <div class="title">
          <h3>团购销量榜</h3>
        </div>
        <div class="list-box layui-clear" id="footerList">
             {{# layui.each(d.footerList,function(index,item){}}
              <div class="item">
                <img src="{{item.img}}" alt="">
                <div class="text">
                  <div class="right-title-number">1</div>
                  <div class="commod">
                    <p>{{item.title}}</p>
                    <span>{{item.price}}</span>
                  </div>
                </div>
              </div>
              {{# });}}
        </div>
      </div>
    </div>
  </script> -->
<script >

  layui.config({
    base: '/res/static/js/util/' //你存放新模块的目录，注意，不是layui的模块目录
  }).use(['mm','laypage','jquery','element'],function(){
      var laypage = layui.laypage,element=layui.element,$ = layui.$;
      mm = layui.mm;


      // layui.use(['laypage','jquery','element'],function(){
      //     var laypage = layui.laypage
      //         ,element=layui.element;
      //完整功能
      laypage.render({
          elem: 'demo0'
          ,count:[[${count}]]
          ,limit:5
          ,curr:[[${nowPage}]]
          ,layout: ['count', 'prev', 'page', 'next', 'skip']
          ,jump: function(obj,first){
              if(!first){
                  // alert(obj.curr)
                  var nowPage = obj.curr;//得到当前页
                  // var pageSize = obj.limit;//每页显示条数
                  location.href="/bulk?nowPage="+nowPage;
              }

          }
      });


      $('body').on('click','*[data-content]',function(){
        $(this).addClass('active').siblings().removeClass('active')
        var dataConte = $(this).attr('data-content');
        $('*[cont]').each(function(i,item){
          var itemCont = $(item).attr('cont');
          console.log(item)
          if(dataConte === itemCont){
            $(item).removeClass('layui-hide');
          }else{
            $(item).addClass('layui-hide');
          }
        })
      })
    // 模版引擎导入
    //  var html = demo.innerHTML;
    //  var listCont = document.getElementById('list-cont');
    //  // console.log(layui.router("#/about.html"))
    // mm.request({
    //     url: '../json/buytoday.json',
    //     success : function(res){
    //       console.log(res)
    //       listCont.innerHTML = mm.renderHtml(html,res)
    //     },
    //     error: function(res){
    //       console.log(res);
    //     }
    //   })

});
</script>


</body>
</html>